<template>
  <!-- 主题区域 -->
  <div class="main-body">
    <!-- 头部搜索 -->
    <div class="demo-form-inline">
      <el-form :inline="true">
        <el-form-item label="设备编号">
          <el-input v-model="input" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="search"
            @click="searchEquip"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主题表单 -->
    <div class="main-form">
      <!-- 新建和批量 -->
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        style="background: #e2430e"
        @click="newBuilt"
      >新建</el-button>
      <el-button type="primary" @click="bulk">批量操作</el-button>
      <!-- 表单内容 -->
      <el-table
        :data="articles"
        stripe
        border
        style="margin-top: 30px"
        @selection-change="handleSelectionChange"
      >>
        <el-table-column type="selection" width="60px" />
        <el-table-column type="index" label="序号" width="60px" />
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column prop="type.name" label="设备型号" />
        <el-table-column prop="node.name" label="详细地址" />
        <el-table-column prop="ownerName" label="合作商" />
        <el-table-column prop="vmStatus1" label="设备状态" />
        <el-table-column label="操作" width="150px" align="center">
          <template #default="scope">
            <el-button
              type="text"
              @click="openEquip(scope.row)"
            >货道</el-button>
            <el-button
              type="text"
              @click="policySea(scope.row)"
            >策略</el-button>
            <el-button type="text" @click="revise(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 脚部上下页面 -->
      <div class="main-foot">
        <span>共{{ totalCount }}条记录--第{{ params.pageIndex }}/{{
          totalPage
        }}页</span>
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            @click="changePageIndex1"
          >上一页</el-button>
          <el-button type="primary" @click="changePageIndex2">
            下一页<i class="el-icon-arrow-right" />
          </el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 新建和批量策略的弹出框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialog"
      width="40%"
      :before-close="handleClose"
      class="newBuilt-bulk"
    >
      <!-- 新增设备 -->
      <el-form
        v-if="title === '新增设备'"
        ref="formNew"
        :model="ruleBuild"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="设备编号">
          <span>: 系统自动生成</span>
        </el-form-item>
        <el-form-item label="选择型号" prop="vmType">
          <el-select v-model="ruleBuild.vmType" placeholder="请选择">
            <el-option
              v-for="(item, index) in typeEquip"
              :key="index"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位" prop="nodeId">
          <el-select v-model="ruleBuild.nodeId" placeholder="请选择">
            <el-option
              v-for="(item, index) in typeArea"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 批量策略管理 -->
      <el-form
        v-else-if="(title = '批量策略设备')"
        ref="formNew1"
        :model="rulePolicy"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="选择策略" prop="policyId">
          <el-select v-model="rulePolicy.policyId" placeholder="请选择">
            <el-option
              v-for="(item, index) in policyEquips"
              :key="index"
              :label="item.policyName"
              :value="item.policyId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="newBuiltEquip">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 货道弹出框 -->
    <el-dialog
      title="货道设置"
      :visible.sync="dialog1"
      :before-close="handleClose"
      class="huodao"
      width="940px"
    >
      <div :class="activeColor ? 'left' : 'left iconActive'" @click="toLeft">
        <i class="el-icon-arrow-left" />
      </div>
      <div :class="activeColor ? 'right iconActive' : 'right'" @click="toRight">
        <i class="el-icon-arrow-right" />
      </div>
      <div>
        <el-form>
          <el-form-item>
            <div class="huodaohead">
              <span>货道行数:{{ equipInformation.vmRow }} </span>
              <span>货道列数:{{ equipInformation.vmCol }}</span>
              <span>
                货道容量(个);{{ equipInformation.channelMaxCapacity }}
              </span>
              <el-button type="primary" @click="smartList">智能排序</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="channel">
        <div class="channel_box">
          <div ref="move" class="channel_list" style="width: 100%">
            <div
              v-for="(item, index) in goodsList"
              :key="item?.channelCode"
              class="goods"
            >
              <div class="code">{{ item?.channelCode }}</div>
              <div class="img_box">
                <div class="pic">
                  <img ref="imgdel" :src="item?.sku?.skuImage" alt="">
                </div>
                <p>{{ item?.sku?.brandName }}</p>
              </div>
              <div class="btn">
                <el-button type="text" @click="addGoods(index)">添加</el-button>
                <el-button
                  type="text"
                  style="color: red"
                  @click="deleted(index)"
                >删除</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footers">
        <el-button type="primary" @click="sureEquip()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 货道智能排序 -->
    <el-dialog
      title="智能排货"
      :visible.sync="dialog5"
      width="850px"
      :before-close="handleClose"
    >
      <span>该区域属于{{ business }}商圈适合销售一下商品</span>
      <div class="channel_list1">
        <div
          v-for="(item, index) in businessTop10"
          :key="index"
          class="smart-list1"
        >
          <div class="img_box1">
            <div class="pic1">
              <img :src="item.image" alt="" class="picture1">
            </div>
            <p>{{ item.skuName }}</p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="enterSort">采纳建议</el-button>
      </span>
    </el-dialog>
    <!-- 货道添加 -->
    <el-dialog
      title="选择商品"
      :visible.sync="dialog6"
      width="860px"
      class="huodao"
      @close="handleClose1"
    >
      <div class="arrow-left" @click="add_change_page(-1)">
        <i class="el-icon-arrow-left" />
      </div>
      <div class="arrow-right" @click="add_change_page(1)">
        <i class="el-icon-arrow-right" />
      </div>
      <div>
        <el-form :inline="true">
          <el-form-item label="设备编号">
            <el-input v-model="input2" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="search"
              @click="addSearchEquip"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div ref="addCardList" class="list">
        <div
          v-for="(item, index) in addGoodsList"
          :key="index"
          class="card_box"
          @click="getCard(item, index)"
        >
          <div v-show="index === cardIndex" class="tag">
            <img :src="tagImg" alt="">
          </div>
          <div class="card">
            <div class="top">
              <div class="img">
                <img :src="item.skuImage" alt="">
              </div>
              <div class="txt">{{ item.brandName }}</div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footers">
        <el-button type="primary" @click="sureAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查询策略弹出对话框 -->
    <el-dialog
      title="批量策略管理"
      :visible.sync="dialog2"
      width="30%"
      @close="handleClose"
    >
      <!-- 选择框 -->
      <span style="margin-right: 16px">选择策略：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSetStrategy">取 消</el-button>
        <el-button
          type="primary"
          style="background: #5984ff"
          @click="setStrategy"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 策略弹出框2 -->
    <el-dialog
      title="策略管理"
      :visible.sync="dialog3"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 内容 -->
      <span>机器编号:{{ strategy.innerCode }}</span><br>
      <span>策略名称:{{ strategy.ploicyName }}</span><br>
      <span>策略方案:{{ strategy.discount }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="background: #5984ff"
          @click="cancelStrategy"
        >取消策略</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="修改设备"
      :visible.sync="dialog4"
      width="40%"
      :before-close="handleClose"
    >
      <el-form :model="reviseForm" label-width="80px" size="mini">
        <el-form-item label="机器编号">
          <span>{{ reviseForm.innerCode }}</span>
        </el-form-item>
        <el-form-item label="供货时间">
          <span>{{ reviseForm.updateTime }}</span>
        </el-form-item>
        <el-form-item label="设备类型">
          <span>{{ reviseForm.typeName }}</span>
        </el-form-item>
        <el-form-item label="设备容量">
          <span>{{ reviseForm.vmCount }}</span>
        </el-form-item>
        <el-form-item label="设备点位">
          <el-select v-model="ruleBuild.selected">
            <el-option
              v-for="(item, index) in typeArea"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合作商">
          <span>{{ reviseForm.ownerName }}</span>
        </el-form-item>
        <el-form-item label="所属区域">
          <span>{{ reviseForm.area }}</span>
        </el-form-item>
        <el-form-item label="设备地址">
          <span>{{ reviseForm.addr }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog4 = false">取 消</el-button>
        <el-button type="primary" @click="reviseSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEquipSearch,
  getEquipType,
  getEquipArea,
  buildEquip,
  policyEquip,
  policySure,
  getStrategy,
  cancelStrategy,
  setStrategy,
  reviseList,
  reviseSubmit,
  equipNews,
  goodsNews,
  shoppingList,
  shoppingTen,
  getAddSearch,
  huodaoSure
} from '@/api/equipment/categories'
export default {
  name: 'CategoriesPage',
  components: {},
  props: {},
  data() {
    return {
      ruleBuild: {
        vmType: '',
        nodeId: '',
        selected: '北京悦荟广场'
      },
      rulePolicy: {
        policyId: ''
      },
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      img: '',
      tagImg: require('@/assets/tagImg.png'),
      title: '', // 标题
      totalCount: '', // 记录的数量
      totalPage: '', // 页数
      articles: [],
      input: '', // 查询绑定的数据
      input1: '',
      dialog: false, // 两个弹出框的控制
      dialog1: false,
      dialog2: false,
      dialog3: false,
      dialog4: false,
      dialog5: false,
      dialog6: false,
      selectForm: {},
      typeEquip: [],
      typeArea: [],
      policyEquips: [],
      innerCodeList: [], // 批量选择获取设备编号
      options: [],
      row: [],
      value: '',
      strategy: {
        // 策略应用
        innerCode: null,
        policyName: null,
        discount: null,
        policyId: null
      },
      setStrategyObj: {
        innerCodeList: [],
        policyId: ''
      },
      // 修改
      reviseForm: {},
      // 货道
      equipInformation: [],
      goodsList: [],
      activeColor: false,
      businessId: '',
      business: '',
      businessTop10: [],
      addGoodsList: [],
      addTotalPage: 1,
      addTotalCount: '',
      addIndex: '',
      innerCode: null,
      iconSelect: false,
      params1: {
        // 添加设备
        pageIndex: 1,
        pageSize: 10
      },
      addGoodItem: {},
      cardIndex: '',
      input2: '',
      rules: {
        vmType: [{ required: true, message: '请选择', trigger: 'change' }],
        nodeId: [{ required: true, message: '请选择', trigger: 'change' }],
        policyId: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getEquipSearch()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    handleSelectionChange(val) {
      this.innerCodeList = val.map((item) => item.innerCode)
      // console.log(this.innerCodeList)
    },

    // 列表渲染----------------------------
    async getEquipSearch() {
      const res = await getEquipSearch(this.params)
      // console.log(res)
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      const arr = res.currentPageRecords
      arr.forEach((item) => {
        if (item.vmStatus === 0) {
          item.vmStatus1 = '未投放'
        } else if (item.vmStatus === 1) {
          item.vmStatus1 = '运营'
        } else if (item.vmStatus === 3) {
          item.vmStatus1 = '撤机'
        }
        this.articles = arr
      })
    },
    // 页面减一
    changePageIndex1() {
      if (this.params.pageIndex > 1) {
        this.params.pageIndex = this.params.pageIndex - 1
      }
      this.getEquipSearch()
    },
    // 页面加一
    changePageIndex2() {
      if (this.params.pageIndex < this.totalPage) {
        this.params.pageIndex = this.params.pageIndex + 1
      }
      this.getEquipSearch()
    },
    // -----------------------------
    // 查询设备
    async searchEquip() {
      this.params.innerCode = this.input
      const res = await getEquipSearch(this.params)
      // console.log(res)
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      const arr = res.currentPageRecords
      arr.forEach((item) => {
        if (item.vmStatus === 0) {
          item.vmStatus1 = '未投放'
        } else if (item.vmStatus === 1) {
          item.vmStatus1 = '运营'
        } else if (item.vmStatus === 3) {
          item.vmStatus1 = '撤机'
        }
        this.articles = arr
      })
    },
    // 新建------------------------
    async newBuilt() {
      this.dialog = true
      this.title = '新增设备'
      const res = await getEquipType(this.params)
      // console.log(res)
      this.typeEquip = res.currentPageRecords
      const res1 = await getEquipArea()
      // console.log(res1)
      this.typeArea = res1.currentPageRecords
    },
    // 批量
    async bulk() {
      if (this.innerCodeList.length === 0) {
        this.$message.error('请勾选要选择的设备')
      } else {
        this.dialog = true
        this.title = '批量策略设备'
        const res = await policyEquip()
        this.policyEquips = res
      }
    },
    // 点击确认新建和批量选择
    async newBuiltEquip() {
      this.dialog = false
      try {
        if (this.title === '新增设备') {
          await this.$refs.formNew.validate()
          console.log(this.ruleBuild)
          const newBulids = {}
          newBulids.vmType = this.ruleBuild.vmType
          newBulids.nodeId = this.ruleBuild.nodeId
          newBulids.createUserId = 1
          await buildEquip(newBulids)
        } else if (this.title === '批量策略设备') {
          await this.$refs.formNew1.validate()
          const policyNew = {}
          policyNew.innerCodeList = this.innerCodeList
          policyNew.policyId = this.rulePolicy.policyId
          await policySure(policyNew)
        }

        this.getEquipSearch()
      } catch (error) {
        console.log(error)
      }
    },

    // 货道---------------
    async openEquip(row) {
      this.dialog1 = true
      const typeId = row.type.typeId
      this.innerCode = row.innerCode
      this.businessId = row.businessId
      // 售货机详情
      const res = await equipNews(typeId)
      // console.log(row)
      this.equipInformation = res
      // 货道物品
      const res1 = await goodsNews(this.innerCode)
      // console.log(res1)
      this.goodsList = res1
    },
    // 确认
    async sureEquip() {
      const arr = this.goodsList.map((item) => {
        return { channelCode: item.channelCode, skuId: item.skuId }
      })
      const obj = {
        innerCode: this.innerCode,
        channelList: arr
      }

      await huodaoSure(obj)
      this.$message.success('更改成功')
      const obj1 = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize
      }
      this.getEquipment(obj1)

      this.dialog1 = false
    },
    // 左右移位
    toRight() {
      this.activeColor = true
      this.$refs.move.style.transform = 'translateX(-850px)'
      this.$refs.move.style.transition = 'all 0.5s'
    },
    toLeft() {
      this.activeColor = false
      this.$refs.move.style.transform = 'translateX(0)'
      this.$refs.move.style.transition = 'all 0.5s'
    },
    // 智能排序
    async smartList() {
      this.dialog5 = true
      const res = await shoppingList(this.businessId)
      this.business = res
      const res1 = await shoppingTen(this.businessId)
      this.businessTop10 = res1
    },
    // 采纳建议
    enterSort() {
      this.businessTop10.forEach((item, index) => {
        this.goodsList[index].sku = {}
        this.goodsList[index].skuId = item.skuId
        this.goodsList[index].sku.brandName = item.skuName
        this.goodsList[index].sku.skuImage = item.image
      })
      this.dialog5 = false
    },
    // 货道添加列表渲染
    async addGoods(index) {
      this.dialog6 = true
      if (this.addIndex === '') this.addIndex = index
      const res = await getAddSearch(this.params1)
      this.addGoodsList = res.currentPageRecords
      this.addTotalPage = res.totalPage
      this.addTotalCount = res.totalCount
    },
    // 货道添加的查询
    async addSearchEquip() {
      // 每次输入都要从第一页开始请求
      this.params1.pageIndex = 1
      if (this.input2 !== '') {
        const obj = { ...this.params1, skuName: this.input2 }
        const res = await getAddSearch(obj)
        this.addGoodsList = res.currentPageRecords
        this.addTotalPage = res.totalPage
        this.addTotalCount = res.totalCount
      } else {
        this.getAddSearch()
      }
    },
    // 添加左右下一页
    async add_change_page(num) {
      // 修改页数
      this.params1.pageIndex = Number(this.params1.pageIndex) + num
      if (this.input2) {
        // 如果输入框有内容
        const obj = { ...this.params1, skuName: this.input2 }
        const res = await getAddSearch(obj)
        this.addGoodsList = res.currentPageRecords
        this.addTotalPage = res.totalPage
        this.addTotalCount = res.totalCount
        return
      }
      this.addGoods()
    },
    // 确认添加
    sureAdd() {
      if (this.goodsList[this.addIndex].sku === null) {
        this.goodsList[this.addIndex].sku = {}
      }
      this.goodsList[this.addIndex].skuId = this.addGoodItem.skuId
      this.goodsList[this.addIndex].sku.brandName = this.addGoodItem.brandName
      this.goodsList[this.addIndex].sku.skuImage = this.addGoodItem.skuImage
      this.dialog6 = false
    },
    // 卡片点击的加√
    getCard(item, index) {
      this.addGoodItem = item
      this.cardIndex = index
    },
    // 重置添加弹出框
    handleClose1() {
      this.addIndex = ''
      this.input4 = ''
      this.cardIndex = ''
      this.params1.pageIndex = 1
    },
    // 删除
    deleted(index) {
      this.$delete(this.goodsList[index].sku, 'skuImage')
      this.goodsList[index].sku.skuImage = ''
      this.goodsList[index].sku.brandName = ''
      this.goodsList[index].skuId = 0
    },
    // --------------------------------
    // 查询策略
    async policySea(row) {
      console.log(row)

      // 获取 当前策略
      const strategy = await getStrategy(row.innerCode)

      // 如果有策略就显示策略弹窗2
      if (strategy) {
        this.dialog3 = true
        this.strategy.innerCode = strategy.innerCode
        this.strategy.ploicyName = strategy.policyName
        this.strategy.discount = strategy.discount + '%'
        this.strategy.policyId = strategy.policyId
      } else {
        this.setStrategyObj.innerCodeList.push(row.innerCode)
        // 如果没有就显示策略弹窗1 让用户选择策略
        this.dialog2 = true
        // 获取下拉选列表
        const res = await policyEquip()
        console.log(res)
        // 处理数据
        this.options = res.map((item, index) => {
          const obj = {
            // value: '选项' + (index + 1),
            value: item.policyId,
            label: item.policyName
          }
          return obj
        })
      }
    },
    // 取消已应用策略
    async cancelStrategy() {
      await cancelStrategy(this.strategy.innerCode, this.strategy.policyId)

      this.dialog3 = false
    },
    // 应用策略
    async setStrategy() {
      if (!this.value) return console.log('请选择')
      this.setStrategyObj.policyId = this.value
      console.log(this.setStrategyObj)
      await setStrategy(this.setStrategyObj)
      this.$message.success('应用成功')
      console.log('成功')
      this.dialog2 = false
    },
    // 取消策略
    async cancelSetStrategy() {
      this.dialog2 = false
    },
    // ------------------------------------------
    // 修改
    async revise(row) {
      this.dialog4 = true
      const res = await reviseList()
      this.reviseForm = res.currentPageRecords.find(
        (item) => item.regionId === row.regionId
      )
      this.reviseForm.innerCode = row.innerCode
      this.reviseForm.area = this.reviseForm.region.name
      this.reviseForm.typeName = row.type.name
      const res1 = await getEquipArea()

      this.typeArea = res1.currentPageRecords
      // console.log(res)
      this.row = row
      // this.reviseForm = {}
      // console.log(this.reviseForm)
      // console.log(this.typeArea)
    },
    async reviseSure() {
      try {
        const id = this.row.id
        const nodeId = this.row.id
        await reviseSubmit(id, nodeId)
      } catch (error) {
        // this.$message.error(error.response.data)
      }
      this.dialog4 = false
    }
    // --------------------------
  }
}
</script>

<style scoped lang="scss">
.main-body {
  background-color: #f8fafd;
  .demo-form-inline {
    background-color: #fff;
    line-height: 64px;
    height: 64px;
    .search {
      height: 36px;
    }
  }
  .main-form {
    background-color: #fff;
    margin-top: 20px;
  }
  .main-foot {
    margin-top: 20px;
    height: 36px;
    display: flex;
    justify-content: space-between;
    span {
      line-height: 36px;
      font-size: 14px;
    }
    ::v-deep .el-button-group > .el-button:first-child {
      height: 36px;
    }
    ::v-deep .el-button-group > .el-button:last-child {
      height: 36px;
    }
  }
}
::v-deep .el-form--inline .el-form-item__content {
  display: inline-block;
  line-height: 64px;
  vertical-align: top;
}

//货道头部
::v-deep .el-dialog {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  margin: 0;
}
.huodaohead {
  display: flex;
  justify-content: space-between;
  padding: 0;
}
// 货道左右移动
.left,
.right {
  position: absolute;
  width: 50px;
  line-height: 50px;
  top: 48%;
  text-align: center;

  i {
    font-size: 50px;
  }
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.iconActive {
  color: #d8dde3;
}
.channel {
  overflow: hidden;
  width: 870px;
  margin-left: 5px;
}
.channel_box {
  height: 400px;
  width: 1700px;
  margin-left: 20px;
  overflow: hidden;
  transition: all 0.8;

  .channel_list {
    height: 400px;
    width: 1700px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    // overflow-y: overlay;

    .goods {
      width: 150px;
      height: 180px;
      margin: 10px 10px;
      box-sizing: border-box;
      border-radius: 8px;
      box-shadow: 0 2px 2px #ccc;
      position: relative;

      .code {
        position: absolute;
        width: 43px;
        height: 24px;
        border-radius: 0 12px 12px 0;
        top: 10px;
        left: 0;
        background-color: #829bed;
        text-align: center;
        line-height: 24px;
        color: #f3f6fb;
      }

      .img_box {
        width: 150px;
        height: 120px;
        padding-top: 16px;
        text-align: center;
        background-color: #f6f7fb;

        .pic {
          width: 84px;
          height: 78px;
          margin-left: 33px;
          margin-bottom: 10px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .btn {
      text-align: center;
    }
  }
}
.dialog-footers {
  width: 200px;
  margin-left: 280px;
}

//智能排序
.channel_list1 {
  height: 400px;
  width: 850px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: overlay;

  .smart-list1 {
    width: 150px;
    height: 180px;
    margin: 10px 8px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 2px #ccc;
    position: relative;
    ::v-deep p {
      margin-top: 40px;
    }
    .img_box1 {
      width: 150px;
      height: 120px;
      padding-top: 16px;
      text-align: center;
      background-color: #f6f7fb;

      .pic1 {
        width: 84px;
        height: 78px;
        margin-left: 33px;
        margin-bottom: 10px;
        overflow: hidden;
        ::v-deep .picture1 {
          width: 100%;
        }
      }
    }
  }
}

// 添加
.arrow-left,
.arrow-right {
  position: absolute;
  width: 50px;
  line-height: 50px;
  top: 48%;
  text-align: center;

  i {
    font-size: 50px;
  }
}
.arrow-left {
  left: 0;
}
.arrow-right {
  right: 0;
}

.channel-form {
  margin: 0 auto;
  width: 600px;
  height: 300px;
  // background-color: pink;
  display: flex;
  flex-wrap: wrap;
  overflow-y: overlay;
  .pic-box {
    width: 100px;
    height: 130px;
    background-color: #f6f7fb;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    position: relative;
    .img2 {
      width: 60px;
      margin: 10px auto 20px;
      img {
        width: 100%;
      }
    }
  }
}
.iconFalse {
  display: none;
}
.iconChick {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: #5f84ff;
  text-align: center;
  i {
    font-size: 16px;
    line-height: 30px;
    color: #fff;
  }
}
::v-deep .el-form-item__label {
  line-height: 60px;
}

// 添加
.list {
  width: 820px;
  display: flex;
  // justify-content: space-between;
  padding: 0 20px;
  flex-wrap: wrap;
  .card_box {
    flex-shrink: 0;
    width: 154px;
    height: 154px;
    padding: 0 10px;
    position: relative;
    .tag {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 0;
      left: 10;
      img {
        height: 100%;
      }
    }
    .card {
      // margin-bottom: 20px;
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);

      .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 134px;
        height: 134px;
        padding-top: 16px;
        border-radius: 4px 4px 0 0;

        background-color: #f6f7fb;
        .img {
          width: 83px;
          height: 84px;
          margin-bottom: 5px;
          img {
            // width: 83px;
            height: 84px;
          }
        }
      }
    }
  }
}
.list .card_box .card .top .img img[data-v-a47c1c52] {
  height: 100%;
  width: 100%;
}
</style>
